<template>
  <div>
    <!--<div style="display: none" id="mainImg">-->
      <img :src="imgUrl" style="width: 100%;max-width: 100%;height: 760px;display: none" id="mainImg"/>
    <!--</div>-->
    <div id="main" ref="imageWrapper">

    </div>

  </div>


</template>
<script>
import html2canvas from "html2canvas"
const zrender = require("zrender/dist/zrender");
import { createLine,createCircle,hoverLine,addHover,createPolygon } from '@/utils/canvas-utli.js'
export default {
  name: 'DrawContainer',
  props: {
    allList:Object
  },
  data () {
    return {
      imgUrl: '',
      dialogMainVisible:true,
      dialogImgVisible:false,
      allListNew:{
        painList:[],//疼痛折线
        temperatureList:[],//体温折线
        hrAndRRList:[], //心率和脉搏折线
        wordsList:[],//文字描述
        hrList:[],
        pulseList:[],
      },
      //线段开始横坐标
      lineStartX: 0,
      //线段开始纵坐标
      lineStartY: 1000,
      //线段结束横坐标
      lineEndX: 0,
      //线段结束纵坐标
      LineEndY: 0,
      //多少个y轴坐标
      xLineLen: {
        //天数 7天
        day: 7,
        //一天多少分段
        time: 6
      },
      canavsWidth: 0, //画板宽度
      canavsHeight: 0, //画板高度
      zr: "", //画板属性
      yLineLen: {
        XRegion: 8, //X轴坐标分几个大块
        XShare: 5, //每块份几个小块
        XLineArr: [], //需要特殊处理的横线 冲上往下算
      },
      YLineReset: [], //Y轴每一小格份几份
      width: 0,
      YCellHeight: 0, //y轴大格子高度
      lastData: 0,  //上一个数据
      CircleSize: 4, //画板上圆点的直径
      hoverCircleSize: 10,//画板上圆点移入变化的直径
      fontSize: 20, //画板上圆圈里的字体大小
      xWidth: 0,//x轴的小格子宽度
      yWidth: 0,//y轴小格子的宽度

    }
  },
  watch: {
    allList: function (newVal, oldVal) {
      this.allListNew={
        temperatureList:newVal.temperatureList,
        wordsList:newVal.wordsList,
        hrList:newVal.hrList,
      }
      this.initPage();
    },
  },
  created() {
  },
  mounted(){
    this.initPage();
  },
  methods:{
    drawImg() {
      this.$nextTick(function () {
        setTimeout(() => {
          html2canvas(
            this.$refs.imageWrapper,
            {
              useCORS: true, // 允许图片跨域
              taintTest: true, // 在渲染前测试图片
            }
          ).then(canvas => {
            let dataURL = canvas.toDataURL("image/png");
            this.imgUrl = dataURL;
          });
        }, 500);

      });
    },
    initPage(){
      this.zr = zrender.init(document.getElementById('main'))
      this.canavsWidth = this.zr.getWidth()
      this.canavsHeight = this.zr.getHeight()
      this.yLine();
      this.xLine();
      this.getXaxis();
      this.getCellHeight()
      //绘制文字
      if(this.allListNew.wordsList!=undefined   &&  this.allListNew.wordsList.length>0){
        this.allListNew.wordsList.forEach((el,i) => {
          this.zrText(el);
        })
      }
      if(this.allListNew.hrList!=undefined   && this.allListNew.hrList.length>0){
        this.zrPolylineHR(this.allListNew.hrList);
      }
      //体温折线
      if(this.allListNew.temperatureList!=undefined  && this.allListNew.temperatureList.length>0){
        this.zrPolylineTemplate(this.allListNew.temperatureList);
      }
      this.drawImg();
    },
    //生成Y轴坐标
    yLine() {
      //横坐标 最底部横坐标
      let Xline = new zrender.Line({
        shape:{
          x1:0,
          y1:this.canavsHeight,
          x2:this.canavsWidth,
          y2:this.canavsHeight
        }
      })
      this.zr.add(Xline)
      const yWidth = this.canavsWidth/this.xLineLen.day
      //循环显示竖线格子 红色竖线 此处不加一出现少竖线的现象
      for (let i = 0; i < this.xLineLen.day+1; i++) {
        //纵坐标
        let Yline = new zrender.Line({
          shape:{
            x1:yWidth*i,
            y1:0,
            x2:yWidth*i,
            y2:this.canavsHeight
          },
          style:{
            opacity:1,
            lineWidth:1,
            stroke:"#ff0000"
          }
        })
        this.zr.add(Yline)
      }
      let yLinAll = this.xLineLen.day*this.xLineLen.time
      for (let i = 0; i < yLinAll+1; i++) {
        let Yline = new zrender.Line({
          shape:{
            x1:yWidth/this.xLineLen.time*i,
            y1:0,
            x2:yWidth/this.xLineLen.time*i,
            y2:this.canavsHeight
          },
          style:{
            opacity:1,
            lineWidth:0.5,
            stroke:"#000"
          }
        })

        this.zr.add(Yline)
      }
    },
    //生成X轴坐标
    xLine(){
      let xHeight = this.canavsHeight/this.yLineLen.XRegion
      let XShareAll = this.yLineLen.XRegion*this.yLineLen.XShare
      for (let i = 0; i < this.yLineLen.XRegion; i++) {
        let color = "#000"
        this.yLineLen.XLineArr.forEach(el => {
          if (el == i) {
            color = "#ff0000"
          }
        });
        //横坐标 加粗
        let Xline = new zrender.Line({
          shape:{
            x1:0,
            y1:xHeight*i,
            x2:this.canavsWidth,
            y2:xHeight*i
          },
          style:{
            opacity:1,
            lineWidth:2,
            stroke:color
          }
        })
        this.zr.add(Xline)

        for (let a = 0; a < XShareAll; a++) {
          //横坐标
          let Xline = new zrender.Line({
            shape:{
              x1:0,
              y1:xHeight/this.yLineLen.XShare*a,
              x2:this.canavsWidth,
              y2:xHeight/this.yLineLen.XShare*a
            },
            style:{
              opacity:1,
              lineWidth:0.4,
              stroke:"#000"
            }
          })
          this.zr.add(Xline)
        }
      }
    },
    //X轴每个小格子宽度
    getXaxis(){
      //yHeight  xHeight
      let xWidth = this.canavsWidth / this.xLineLen.day / this.xLineLen.time
      this.xWidth=xWidth;
    },
    // Y轴每个小格子高度
    getCellHeight() {
      let yWidth = this.canavsHeight / this.yLineLen.XRegion / this.yLineLen.XShare
      this.yWidth=yWidth;
    },
    //画心率 实心圆
    zrPolylineHR(data){
      data.forEach((el,i) => {
        let cx = this.getX(el.moment)
        let cy1 = this.transformYHR(el.hr)
        let Circle1 =   createCircle(cx,cy1,this.CircleSize,{
          stroke:"red",
          fill:"red",
        })
        this.zr.add(Circle1)
        //画线
        if (i > 0) {
          let firstX = this.getX(data[i-1].moment)
          let firstY = this.transformYHR(data[i-1].hr)
          let x = this.getX(data[i].moment)
          let y = this.transformYHR(data[i].hr)
          let line = createLine(firstX,firstY,x,y,{
            stroke:"red",
            lineWidth:2,
          })
          this.zr.add(line)
        }
      })
    },
    //画脉搏   空心圆
    zrPolylinePulse(data){
      data.forEach((el,i) => {
        let cx = this.getX(el.moment)
        let cy2 = this.transformYHR(el.pulse)
        let Circle2 =   createCircle(cx,cy2,this.CircleSize,{
          stroke:"red",
          fill:"#fff",
        })
        this.zr.add(Circle2)
        //画线
        if (i > 0) {
          let firstX = this.getX(data[i-1].moment)
          let firstY = this.transformYHR(data[i-1].pulse)
          let x = this.getX(data[i].moment)
          let y = this.transformYHR(data[i].pulse)
          let line = createLine(firstX,firstY,x,y,{
            stroke:"black",
            lineWidth:2,
          })
          this.zr.add(line)
        }
      })
    },
    //画体温折线 生成x
    zrPolylineTemplate(data){
      data.forEach((el,i) => {
        if(el.temperature!=""){
          //let cx = this.getX(el.moment2)
          let cx = this.getTempalteHoursX(el.moment2,el.moment);
          let cy1 = this.transformY(el.temperature)
          let Circle1 =  new zrender.Text({
            style: {
              text: 'X',
              fontSize: 14,
              textFill: "black",
            },
            position: [cx-6, cy1-7]
          })
          this.zr.add(Circle1)
          //画线
          /**
          if (i > 0) {
            let firstX = this.getX(data[i-1].moment)
            let firstY = this.transformY(data[i-1].temperature)
            let x = this.getX(data[i].moment)
            let y = this.transformY(data[i].temperature)

            let line = createLine(firstX,firstY,x,y,{
              stroke:"blue",
              lineWidth:2,
            })
            this.zr.add(line)
          }
           **/
          //画虚线
          if (i > 0) {
            let firstX = this.getTempalteHoursX(data[i-1].moment2,data[i-1].moment);
            let firstY = this.transformY(data[i-1].temperature)
            let x = this.getTempalteHoursX(data[i].moment2,data[i].moment);
            let y = this.transformY(data[i].temperature);
            let line;
            if(firstY<y &&  firstY<=this.transformY(39)){
              line = createLine(firstX,firstY,x,y,{
                stroke:"blue",
                lineWidth:2,
                lineDash:[5,5],
              })
              //画空心圆圈   横轴是上一个减下一    纵轴也是
              let cx =firstX+(x-firstX)/2;
              let cy1 =firstY+(y-firstY)/2;
              let Circle1 =   createCircle(cx,cy1,this.CircleSize,{
                stroke:"blue",
                fill:"#fff",
              })
              this.zr.add(Circle1)
            }else{
              line = createLine(firstX,firstY,x,y,{
                stroke:"blue",
                lineWidth:2,
              })
            }
            this.zr.add(line)
          }
        }

      })
    },
    //绘制文本内容 将文字放到矩形中，偏移量就是y中每格的长度
    zrText(data){
      let x=0;
      if(data.moment==0){
        x=0
      }else{
        x=parseInt(data.moment/4)*(this.xWidth);
      }
      let state = new zrender.Group();
      state.add(
        new zrender.Text({
          style:{
            text:data.chineseStatus,
            textShadowColor:"#fff",
            textStroke:"#fff",
            textFill:'black',
            textAlign:"center",
            fontSize:this.yWidth
          },
          position:[x,0],
          zlevel:4
        })
      );
      this.zr.add(state)
    },
    //计算时间转换x轴坐标
    XShareOne(data){
      let width =parseFloat(this.xWidth/4)*(parseFloat(data));
      return width;
    },
    //转换y轴坐标点为正确坐标点 因为y轴坐标是顶点为0递增的 所有用总高度减去原来坐标的高度剩下的高度就是正确坐标点
    // y轴最小值32   33   18*5=90   810
    //转换成体温的y轴
    transformY(data){
      let with2=(parseFloat(data)-34)/0.2;
      let surplusHeight=parseInt(this.canavsHeight)-with2*parseFloat(this.yWidth);
      return surplusHeight
    },
    //转换成心率和脉搏的y轴
    transformYHR(data){
      let with2=(parseFloat(data)-20)/4;
      let surplusHeight=parseInt(this.canavsHeight)-with2*parseFloat(this.yWidth);
      return surplusHeight
    },
    //获取X坐标 data当前时间点
    getX(data){
      let XShareOne = this.XShareOne(data)
      return XShareOne
    },
    //获取体温的单独横坐标数据
    getTempalteHoursX(data,i){
      let XShareOne=parseFloat(this.xWidth/4)*(data)+parseFloat(this.xWidth)*6*i;
      return XShareOne
    },
    //重置y轴坐标间隔条数 传入日期数组 格式["1","3","4","5","6","18","21","24"]
    resetY(data){
      let oneYLinWidth = this.canavsWidth/this.xLineLen.day/this.xLineLen.time //每个时间点格子宽度
      let resetArr = [] //得到的新数组
      data.forEach((item,i) => {
        if (i == 0) {
          for (let index = 0; index < item; index++) {
            resetArr.push({
              width:oneYLinWidth/2/item
            })
          }
        }else{
          let indexItem = item - data[i-1]
          for (let index = 0; index < indexItem; index++) {
            resetArr.push({
              width:oneYLinWidth/indexItem
            })
          }
          if (i+1 == data.length) {
            let indexItem = 24 - item
            for (let index = 0; index < indexItem; index++) {
              resetArr.push({
                width:oneYLinWidth/2/indexItem
              })
            }
          }
        }
      })
      return resetArr
    },
    getFloat(num,n){
      n = n ? parseInt(n) : 0;
      if(n <= 0) {
        return Math.round(num);
      }
      num = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); //四舍五入
      num = Number(num).toFixed(n); //补足位数
      return num;
    },
    hoverLine(){
      var timer = null;
      let line = new zrender.Line({
        shape:{
          x1:0,
          y1:0,
          x2:0,
          y2:this.canavsHeight
        },
      })
      this.zr.add(line)

      hoverLine(this.zr,line,this.canavsHeight)
    }
  }
}
</script>
<style  scoped>
#main{
  height: 760px;
  width: 100%;
  position: relative;
  border-right: 1px solid #000;
}
#mainImg{
  height: 760px;
  width: 100%;
  position: relative;
  border-right: 1px solid #000;
}
html,body{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
canvas{
  width: 100%;
  height: 760px;
}
</style>
